<template>
  <h1>日历功能展示</h1>
  <div id="calender">
    <div class="txt-c p-10">
      <button @click="prev" class="btn btn-default">上个月</button>
        <i class="fa fa-angle-left"></i>
      <input type="text" v-model="year" @keydown.enter="ensure">年
      <input type="text" v-model="month" class="month" @keydown.enter="ensure">月
      <input type="text" v-model="day" class="day" @keydown.enter="ensure" >日
      <button @click="next" class="btn btn-default">下个月</button>
    </div>
    <button @click="ensure"  class="btn btn-default">确定</button>
    <br/>
<!--    //显示当前日期-->
    <div class="txt-c p-10">
      {{year}}年{{month}}月{{day}}日
    </div>
    <div class="weekDay flex jc-sb p-5 day" >
      <p v-for="item in weekList" :key="item.id">{{item}}</p>
    </div>
    <div class="weekDay flex p-5 day">
<!--      每月空前天数显示空白-->
      <p v-for="item in spaceDay" :key="item.id"></p>
<!--      每月实际天数显示-->
      <p v-for="(item,idx) in (monthDay[this.month-1] || 30)" @click="setDay(idx)" :class="idx===activeDay?'active':''" :key="item.id">{{item}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: "CalenderServe",
  data(){
    return{
      year: '', // 年份
      month: '', // 月份
      day: '', // 天数
      current: '', // 当前时间
      weekList:['周一','周二','周三','周四','周五','周六','周日'],
      monthDay:[31,'',31,30,31,30,31,31,30,31,30,31],
      activeDay: '', // 选中的日期
      spaceDay: '', // 每个月第一天是星期几
      February:'' // 判断2月份的天数
    }
  },
  created(){
    this.current = new Date()
    this.getTheCurrentDate()
    this.getMonthFisrtDay()
    this.February = this.isLeapYear(this.year) ? 28 : 29
    this.monthDay.splice(1,1,this.February)
  },
  watch:{
    month(){
      if(this.month>12||this.month<1){
        console.log('请输入正确月份')
        return
      }
      this.getMonthFisrtDay()
    },
    year(){
      this.getMonthFisrtDay()
    },
    day(){
      if(this.day>31||this.day<1){
        console.log('请输入正确天数')
        return
      }
        // this.getTheCurrentDate()
    }
  },
  methods:{
    // 判断是否是闰年
    isLeapYear(year){

      return year % 4 == 0 && year % 100 != 0 ||year % 400 == 0;
    },
    // 选取特定天数
    setDay(idx){
      this.activeDay = idx
      this.day = idx + 1
      console.log('选择的日期是'+this.year+' '+this.month+' '+this.day)
    },
    ensure(){
        this.setDay(this.day-1)
    },
    // 判断月份的第一天是星期几
    getMonthFisrtDay(){
      var firstDayOfCurrentMonth = new Date(this.year,this.month-1,1) // 某年某月的第一天
      if(firstDayOfCurrentMonth.getDay() == 0){
        this.spaceDay = 6
      } else {
        this.spaceDay = firstDayOfCurrentMonth.getDay() - 1
      }
    },
    // 获取当前的日期
    getTheCurrentDate(){
      this.year = this.current.getFullYear()
      this.month = this.current.getMonth() + 1
      this.day = this.current.getDate()
    },
    prev(){
      if(this.month==1){
        this.year--
        this.month=12
      }else{
        this.month--
      }
      this.activeDay = this.day-1
      this.getMonthFisrtDay()
    },
    next(){
      if(this.month==12){
        this.year++
        this.month=1
      }else{
        this.month++
      }
      this.activeDay = this.day-1
      this.getMonthFisrtDay()
    },
  }
}
</script>

<style lang="scss" scoped>
#calender{
  .txt-c{
    text-align: center;
  }
  .p-10{
    padding: 2rem;
  }
  .p-5{
    padding: 1rem;
  }
  .flex {
    display: flex;
  }
  .jc-sb{
    justify-content: space-between;
  }
  input{
    width: 50px;
    &.month{
      width: 30px;
    }
  }
  .day{
    flex-wrap: wrap;
    p{
      width: 14.28%;
      /*flex: 0 0 0 ;*/
      text-align: center;
      line-height: 2.4rem;
      height: 2.4rem;
      position: relative;
      z-index: 100;
      &.active{
        color: #fff;
      }
      &.active:before{
        content: '';
        height: 2.5rem;
        width: 2.5rem;
        position: absolute;
        z-index: -1;
        left: 0;
        top: 0;
        transform: translateX(50%);
        border-radius: 50%;
        background: #e97163;
        color: #fff;
      }
    }
  }
}
</style>